<template>
	<view class="body-view">
	    <!--导航和状态栏-->
	    <view class="state-navigation psr" style="z-index:100;">
	        <view class="slim_header_navigation d-flex a-center j-center">
	            <view class="left_box" @tap="goBack">
	                <image src="/static/center/back.png" class="back"></image>
	            </view>
	            <view class="title">设置支付密码</view>
	            <view class="right_box">
	                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
	            </view>
	        </view>
	    </view>
	    <!-- 顶部位置占位 -->
	    <view style="height:calc(120rpx + var(--status-bar-height));"></view>
		<view class="body-content">
			<view class="content-piece">
				<view class="piece-title d-flex a-center">
					<view class="piece-title-text">身份验证</view>
					<view class="piece-title-background"></view>
				</view>
				<view class="piece-row d-flex a-center">
					<view class="piece-row-letf">手机号</view>
					<view class="piece-row-right">
						<view class="row-right-phone">{{desensitizePhone(userData.phone)}}</view>
					</view>
				</view>
				<view class="piece-row d-flex a-center">
					<view class="piece-row-letf">验证码</view>
					<view class="piece-row-right">
						<view class="row-right-input d-flex a-center j-between">
							<input class="right-input-tetx" v-model="code"/>
							<view v-if="showGetCode" class="row-right-btn" @tap="getCode">获取验证码</view>
							<view v-else class="seconds d-flex a-center j-center">{{ seconds }}s后重试</view>
						</view>
					</view>
				</view>
				<view style="height: 20rpx;"></view>
			</view>
			<view style="height: 20rpx;"></view>
			<view class="content-piece">
				<view class="piece-title d-flex a-center">
					<view class="piece-title-text">设置密码</view>
					<view class="piece-title-background"></view>
				</view>
				<view class="piece-row-title">请输入6位支付密码</view>
				<view @tap="showKeyboard(0)" class="piece-row-pwd d-flex j-between">
					<view class="row-pwd-frame" :class="{focus:isFocus0(0)}">{{getShowDigit0(0)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus0(1)}">{{getShowDigit0(1)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus0(2)}">{{getShowDigit0(2)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus0(3)}">{{getShowDigit0(3)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus0(4)}">{{getShowDigit0(4)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus0(5)}">{{getShowDigit0(5)}}</view>
				</view>
				<view style="height: 30rpx;"></view>
				<view class="piece-row-title">重复输入</view>
				<view @tap="showKeyboard(1)" class="piece-row-pwd d-flex j-between">
					<view class="row-pwd-frame" :class="{focus:isFocus1(0)}">{{getShowDigit1(0)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus1(1)}">{{getShowDigit1(1)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus1(2)}">{{getShowDigit1(2)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus1(3)}">{{getShowDigit1(3)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus1(4)}">{{getShowDigit1(4)}}</view>
					<view class="row-pwd-frame" :class="{focus:isFocus1(5)}">{{getShowDigit1(5)}}</view>
				</view>
				<view style="height: 42rpx;"></view>
			</view>
		</view>
		<!--输入键盘-->
		<uni-popup ref="keyboardPopup" @change="changPopup" :safe-area="false" type="bottom" mask-background-color="rgba(0,0,0,0)">
			<view class="popup-keyboard">
				<view class="edit-keyboard d-flex j-between wrap">
					<view @touchstart.stop="count('1')" class="edit-keyboard-button">1</view>
					<view @touchstart.stop="count('2')" class="edit-keyboard-button">2</view>
					<view @touchstart.stop="count('3')" class="edit-keyboard-button">3</view>
					<view @touchstart.stop="count('4')" class="edit-keyboard-button">4</view>
					<view @touchstart.stop="count('5')" class="edit-keyboard-button">5</view>
					<view @touchstart.stop="count('6')" class="edit-keyboard-button">6</view>
					<view @touchstart.stop="count('7')" class="edit-keyboard-button">7</view>
					<view @touchstart.stop="count('8')" class="edit-keyboard-button">8</view>
					<view @touchstart.stop="count('9')" class="edit-keyboard-button">9</view>
					<view style="width: 210rpx;"></view>
					<view @touchstart.stop="count('0')" class="edit-keyboard-button">0</view>
					<view @touchstart.stop="count('del')" class="edit-keyboard-button d-flex a-center j-center">
						<image class="keyboard-button-image" src="@/static/image/keyboard-del.png"></image>
					</view>
				</view>
				<view style="height: 50rpx;"></view>
			</view>
		</uni-popup>
		<view class="bottom-btn d-flex a-center j-center">
			<tm-button
				_style="margin: 0;font-weight: 600;"
				:width="690"
				:height="80"
				:shadow="-1"
				round="5"
				:linear-color="['#64F1C5', '#29DBA3']"
				linear="left"
				:fontSize="32"
				fontColor="#ffffff"
				label="确定"
				@tap="submit"
			></tm-button>
		</view>
	</view>
	
</template>

<script setup lang="tsx">
import { ref,nextTick } from "vue";
import { userData as userDataStore } from "@/store/userData";
import { desensitizePhone } from "@/utils/format"
import { getVerCode,setPayPwd } from "@/api/api";
import md5 from 'js-md5';

const userData:any = userDataStore();
const goBack = () => {
    uni.navigateBack();
};
const showGetCode = ref(true);
const seconds = ref(60);
const getCode = async ()=>{
    seconds.value = 60;
    showGetCode.value = false;
	
    const res:any = await getVerCode({phone:userData.phone,messageType:'4'});
    const { flag } = res;
    if(flag===1){
        uni.showToast({
            icon: "none",
            title: '验证码已成功发送',
            duration: 1500,
        });
        let int = setInterval(()=>{

            if(seconds.value===1){
                showGetCode.value = true;
                clearInterval(int);
                return
            }

            seconds.value = seconds.value-1
        },1000)
    }

    
}
const code = ref('')
const formData:any = ref({
	pwd0:'',
	pwd1:''
});
const keyboardPopup = ref();
//输入类型，0：第一次输入，1：第二次输入
const inputType = ref(0);
const count = (str:string) => {
	if(str=='del'){
		if(inputType.value===0){
			nextTick(()=>{
				if(formData.value.pwd0.length>0&&formData.value.pwd0.length<=6)formData.value.pwd0 = formData.value.pwd0.slice(0, -1);
				if(formData.value.pwd0.length==0)keyboardPopup.value.close();
			});
			
		}
		if(inputType.value===1){
			nextTick(()=>{
				if(formData.value.pwd1.length>0&&formData.value.pwd0.length<=6)formData.value.pwd1 = formData.value.pwd1.slice(0, -1);
				if(formData.value.pwd1.length==0)keyboardPopup.value.close();
			});
			
		}
	}else{
		if(inputType.value===0){
			nextTick(()=>{
				if(formData.value.pwd0.length<6&&formData.value.pwd0.length>=0)formData.value.pwd0 += str;
				if(formData.value.pwd0.length==6)keyboardPopup.value.close();
			});
			
		}
		if(inputType.value===1){
			nextTick(()=>{
				if(formData.value.pwd1.length<6&&formData.value.pwd0.length>=0)formData.value.pwd1 += str;
				if(formData.value.pwd1.length==6)keyboardPopup.value.close();
			});
			
		}
	}
	
}
const showKeyboard = (idx:number) => {
	inputType.value = idx;
	keyboardPopup.value.open();
}
const getShowDigit0 = (idx:number) => {
	if(formData.value.pwd0.length>idx){
		return "·";
		//return formData.value.pwd0[idx];
	}
	return "";
}
const getShowDigit1 = (idx:number) => {
	if(formData.value.pwd1.length>idx){
		return "·";
		//return formData.value.pwd1[idx];
	}
	return "";
}
const showPopup = ref(false)
const changPopup = (e:any) => {
	showPopup.value = e.show;
}
const isFocus0 = (idx:number) => {
	if(formData.value.pwd0.length==idx&&inputType.value==0&&showPopup.value){
		return true
	}else{
		return false
	}
}
const isFocus1 = (idx:number) => {
	if(formData.value.pwd1.length==idx&&inputType.value==1&&showPopup.value){
		return true
	}else{
		return false
	}
}
const submit = () => {
	if(!isValidCode(code.value)){
		uni.showToast({
			icon:'none',
			title:'请输入6位数字验证码',
			duration:1500
		})
		return
	}
	if(!isValidCode(formData.value.pwd0)){
		uni.showToast({
			icon:'none',
			title:'请输入支付密码',
			duration:1500
		})
		return
	}
	if(!isValidCode(formData.value.pwd1)){
		uni.showToast({
			icon:'none',
			title:'请再次输入支付密码',
			duration:1500
		})
		return
	}
	if(formData.value.pwd0!=formData.value.pwd1){
		uni.showToast({
			icon:'none',
			title:'两次密码不一致',
			duration:1500
		})
		return
	}
	formData.value.authCode = md5(code.value)
	formData.value.phone = userData.phone
	formData.value.payPwd = formData.value.pwd0
	setPayPwd(formData.value).then((res:any) => {
		if(res.success){
			uni.navigateBack({
				delta:1,
				success: () => {
					userData.setUserData({payPwd:formData.value.payPwd})
					uni.showToast({
					    title: "设置成功",  
					    icon: 'none',  
					    duration: 1500,
					});
				}
			});
		}else{
			uni.showToast({
			    title: res.message,  
			    icon: 'none',  
			    duration: 1500,
			});
		}
	})
}
function isValidCode(code:string) {  
    const regex = /^\d{6}$/;  
    return regex.test(code);  
}
</script>

<style lang="scss" scoped>
@import './setPayPwd.scss';
</style>